<template>
  <div class="search" :style="{ backgroundColor: config.color }">
    <el-input
      class="search-input"
      :class="{
        circle: config.border_style_method,
        center: config.text_align_method
      }"
      :style="{
        color: config.text_color,
        borderColor: config.border_style_color,
        height: config.border_style_height + 'px'
      }"
      :placeholder="
        config.hot_search_keys[0] ? config.hot_search_keys[0].val : ''
      "
      prefix-icon="el-icon-search"
      v-model="searchData"
    >
    </el-input>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      searchData: this.value ? this.value.hot_search_keys[0].val : '',
      config: this.value ? this.value : {}
    }
  },
  watch: {
    value: {
      deep: true,
      handler: function(newVal) {
        this.config = newVal
        this.searchData = newVal.hot_search_keys[0] ? newVal.hot_search_keys[0].val : ''
      }
    }
  },
  methods: {
    jump() {
      this.$router.push(this.config.link)
    }
  }
}
</script>

<style lang="less">
.search {
  padding: 5px 15px 5px 15px;
  .search-input {
    &.circle {
      .el-input__inner {
        border-radius: 20px;
      }
    }
    &.center {
      .el-input__inner {
        text-align: center;
      }
    }
    .el-input__inner {
      color: inherit !important;
      border-color: inherit;
      height: inherit;
    }
    .el-input__prefix {
      color: inherit;
      .el-input__icon {
        display: flex;
        align-items: center;
        justify-items: center;
        padding-left: 5px;
      }
    }
  }
}
</style>
